<template>
  <el-dialog title="线路选择" :visible.sync="dialogVisible" :close-on-click-modal="false" width="33%">
    <el-row :visible.sync="dialogVisible" class="block-col-2">
      <el-col :span="24">
         <el-dropdown  @command="changeValue"> 
          <el-button type="primary">
            {{projectName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(p,index) in project" :key="index" :command="p">{{p.pName}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <div class="huoche" v-for="(t,index) in tunnelline" :key="index">
      <h3 class="hr">{{t.tunnel}}</h3>
      <p v-for="p in t.info" :key="p.id" style="margin:15px 15px">
        <el-link type="primary"  @click="getWid(p.id)"  class="spantext">{{p.line}}--{{ p.mile }}m</el-link>
      </p>
    </div>
  </el-dialog>
</template>

<script>
import api from "../../../api";

export default {
  data() {
    return {
      pid:'',
      projectName:"选择项目",
      project: [],
      dialogVisible: true,
      tunnelline:[],
      leftpercent:''
    };
  },
  mounted() {
    api.proAdminfindByAll().then((res) => {
      this.project = res.data.data;
    });
    this.$bus.$on("onShowerSummaryWidth", (row) => {
      this.dialogVisible = row;
    });
  },

  methods: {
    changeValue(p){
       this.projectName = p.pName
       this.pid = p.id
       api.SupervisionWorkFindByProjectNameAndTunnelName({id:p.id}).then(res =>{
        if (res.data.code == 2001){
          this.tunnelline = res.data.data
        }
       })
    },
    getWid(id){
      this.$emit("onWidEvent",id)
      this.dialogVisible = false
    }
  },
};
</script>

<style scoped>
#app {
  width: 350px;
  height: 250px;
  border: 1px solid black;
}

.spantext {
  cursor: pointer;
  width: 140px;
  display: inline-block;
  font-size: 15px;
}
.hr {
  font-size: 15px;
  /* padding: 0; */
  margin: 0px 15px;
}
.progress {
  width: 190px;
  display: inline-block;
}

.huoche {
  /* border: 1px solid black; */
  height: 85px;
  margin-top: 20px;
}
.tag {
  padding: 0px 0px;
  height: 20px;
  font-size: 8px;
  line-height: 20px;
}
</style>
